<template>

  <div class="header custom-padding mt-4 mx-auto">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <ul class="list-inline mx-auto hidden">
            <li class="list-inline-item">
              <a href="#" class="text-black social-icon"><i class="fa-brands fa-facebook-f"></i></a>
            </li>
            <li class="list-inline-item">
              <a href="#" class="text-black social-icon"><i class="fa-brands fa-x-twitter"></i></a>
            </li>
            <li class="list-inline-item">
              <a href="#" class="text-black social-icon"><i class="fa-brands fa-linkedin-in"></i></a>
            </li>
            <li class="list-inline-item">
              <a href="#" class="text-black social-icon"><i class="fab fa-instagram"></i></a>
            </li>
          </ul>
          <h3 class="heading" style="margin-top: 60px">
            <span style="color: red;margin-right: 10px">APS</span>
            <span style="font-size: 14px">高级排产排程系统</span></h3>
          <p> &nbsp;</p>
          <p  style="text-indent: 2em">
            APS 高级排产排程系统，基于先进算法与多维数据，快速生成精准生产计划。面对复杂订单与物料库存，能快速完成排产与排程，且极为可靠
            。
            可实时响应，灵活优化计划，保障生产平稳，助企业提升效率、降低成本 。
          </p>
          <a class="btn btn-dark btn-lg header-btn" @click="toAps">点击体验</a>
          <a class="btn btn-light btn-lg header-btn hidden">Let's Talk</a>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 mb-lg-0">
          <div class="container">
            <div class="card header-box2  animate__slideOutDown animate__infinite" style="z-index: 100">
              <div class="card-body">
                <h5>排产</h5>
                <small>基于约束条件的智能计划安排</small>
              </div>
            </div>
            <img :src="require('@/static/picture/header-img2.jpg')"  id="hover-image" style="border-radius: 30px"
                 class="p-4 header-img img-fluid rounded" />

            <div class="header-box1 card  animate__slideOutUp animate__infinite">
              <div class="card-body">
                <h5>排程</h5>
                <small>基于多因素的智能优化调度安排</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

import {toAps} from "@/js";

export default {
  name: 'HomeSlider',
  components: {},
  data() {
    return {
      windowHeight: 800,
      showInfo: false,
    }
  },
  created() {
    this.windowHeight = window.innerHeight + 10;
    console.info('windowHeight', this.windowHeight)
  },
  methods: {
    toAps,
    showInfoFun(bool) {
      this.showInfo = bool;
      console.info(bool)
    },

  }
}

</script>

<style scoped>

#home_carousel_1 {
  background-image: url('@/static/image/bg-1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#home_carousel_2 {
  background-image: url('@/static/image/bg-2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#home_carousel_3 {
  background-image: url('@/static/image/bg-3.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#home_carousel_4 {
  background-image: url('@/static/image/bg-4.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.centerContext {
  margin: 15% 0;
  cursor: pointer;
}

.centerContext .title {
  font-size: 65px;
  font-weight: bolder;
  text-align: center;
  color: #ff7e31;
  z-index: 1000;
}

.centerContext .desc {
  font-size: 25px;
  text-align: center;
  color: #ff7e31;
  z-index: 1000;
}


.itemParent {
  margin-top: 40px;
  font-size: 30px;
  text-align: center;
}

</style>